<!--头部-->
<template xmlns:v-popover="http://www.w3.org/1999/xhtml">
  <div id="header" class="header">
    <div style="display: flex">
      <div class="logo">
        <img
          src="./../assets/out_resource/images/logo1.png"
          width="40px"
          height="40px"
        />
      </div>
      <div class="ver">
<!--        <h4>工具流运行平台</h4>-->
        <h4>{{$store.state.global.title}}</h4>
      </div>
      <el-menu
        style="margin-left: 16px"
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
        text-color="#fff"
        active-text-color="#fff"
        router
      >
        <el-menu-item index="/home/main">
          <template slot="title">
            <svg-icon icon-class="home"></svg-icon>
            首页
          </template>
        </el-menu-item>

<!--        <el-menu-item index="/home/project">-->
<!--          <template slot="title">-->
<!--            <svg-icon icon-class="engineering"></svg-icon>-->
<!--            工具流设计-->
<!--          </template>-->
<!--        </el-menu-item>-->

<!--        <el-menu-item index="/home/projectTwo">-->
<!--          <template slot="title">-->
<!--            <svg-icon icon-class="engineering"></svg-icon>-->
<!--            运行-->
<!--          </template>-->
<!--        </el-menu-item>-->

        <el-menu-item index="/home/components" v-if="isAdminAuth || authNameStr.indexOf('组件系统') >= 0">
          <template slot="title">
            <svg-icon icon-class="component"></svg-icon>
            组件系统
          </template>
        </el-menu-item>

        <el-menu-item index="/home/baseSetting" v-if="isAdminAuth || authNameStr.indexOf('基础配置') >= 0">
          <template slot="title">
            <svg-icon icon-class="model"></svg-icon>
            基础配置
          </template>
        </el-menu-item>



      </el-menu>
    </div>
    <el-popover ref="popover4" placement="bottom" width="400" trigger="click">
      <el-table :data="headerDeal.gridData" max-height="350">
        <el-table-column property="content" label="消息通知"></el-table-column>
        <el-table-column align="center" width="70" label="操作">
          <template slot-scope="scope">
            <div id="funBtn" class="funBtn">
              <el-button
                title="删除"
                @click="headerDeal.gridData.splice(scope.$index, 1)"
                type="text"
                ><i class="fa fa-trash"></i
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-popover>
    <div class="tool">
      <!--<a href="javascript:void(0)" @click="headerDeal.newMessage = false" v-popover:popover4>
        <el-badge :is-dot="headerDeal.newMessage">
          <i class="fa fa-bell-o" style="width:25px;"></i>
        </el-badge>
        <span>消息</span>
      </a>-->
      <el-tooltip
        id="userInfo"
        class="item"
        :enterable="true"
        popper-class="userInfoTip"
        placement="bottom-end"
      >
        <div slot="content">
          <p>{{ username }}</p>
        </div>
        <a href="javascript:void(0)">
          <i class="fa fa-user hoverCss" style="color: white"></i>
          <span>用户</span>
        </a>
      </el-tooltip>
      <a href="javascript:void(0)" @click="exitSys" ><i class="fa fa-sign-out" style="color: white"></i><span>退出</span></a
      >
    </div>
  </div>
</template>
<style>
.el-badge__content.is-fixed.is-dot {
  right: 20px;
  top: 14px;
}
.el-menu--horizontal > .el-menu-item {
  height: 52px !important;
  line-height: 52px !important;
  border-bottom: none;
  background-color: #015cac;
}
.el-menu--horizontal > .el-menu-item:hover {
  background-color: #408fcc !important;
}
.el-menu--horizontal > .is-active {
  background-color: #408fcc !important;
}
.is-active {
  border-bottom-color: #408fcc !important;
}
.hoverCss:hover {
  color: white !important;
}
.header .tool a:hover span {
  color: white !important;
}
.header .tool a span {
  color: white !important;
}
</style>
<script>
import { mapGetters } from "vuex";

export default {
  name: "Header",
  data: function() {
    return {
      activeIndex: this.$route.path,

      isAdminAuth: localStorage.getItem("isAdminAuth") === "1" ? true : false,
      authNameStr: localStorage.getItem("authNameStr")
    };
  },
  watch: {
    $route: {
      handler() {
        this.activeIndex = this.$route.path;
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters([
      "httpServer",
      "httpOauth",
      "httpClient",
      "permission",
      "username",
      "headerDeal",
      "title",
      "mode"
    ])
  },
  created: function() {
    //进入页面后启动接收消息处理状态
    // this.$store.dispatch("openWebsocket");
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$store.state.global.navMenu.forEach(item => {
        if (item.linkTo == key) {
          this.$store.state.global.curMenuItem = item;
        }
      });
    },
    exitSys: function() {
      //退出
      this.$confirm("确认退出系统?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.sureExit();
        })
        .catch(() => {});
    },
    sureExit: function() {
      /*location.href = `${this.httpOauth}/logout?accessToken=${localStorage.accessToken}
        &redirect=${this.httpClient}`;*/
      localStorage.removeItem("accessToken");
      localStorage.removeItem("userInfo");
      localStorage.removeItem("userAuthList");

      localStorage.removeItem("isAdminAuth");
      localStorage.removeItem("authObj");
      localStorage.removeItem("authNameStr");

      // location.href = `${this.httpClient}`;
      this.$router.push("/login_banner");
    }
  }
};
</script>
